<template>
	<div class="alarm">
		<div class="title">“两违”监测</div>
		<div class="count">
			近半年发现违建总数：<span>{{ count.total }}</span> ，处置中数：<span>{{ count.czz }}</span> ，已办结数：<span>{{ count.ycz }}</span> ，处置超期数：<span>{{ count.cqczz }}</span>
			，超期已办结数：<span>{{ count.cqycz }}</span>
		</div>
		<div class="line-1">
			<div class="item" @click=";(dialogVisible = true), (logType = 0)">
				<div class="circle">
					<span>{{ count.czz }}</span
					>件
				</div>
				<p>处置中数量</p>
			</div>
			<div class="item" @click=";(dialogVisible = true), (logType = 1)">
				<div class="circle">
					<span>{{ count.ycz }}</span
					>件
				</div>
				<p>已办结数</p>
			</div>

			<div class="item" @click=";(dialogVisible = true), (logType = 2)">
				<div class="circle-2">
					<span>{{ count.cqczz }}</span
					>件
				</div>
				<p>处置超期数</p>
			</div>
			<div class="item" @click=";(dialogVisible = true), (logType = 3)">
				<div class="circle">
					<span>{{ count.cqycz }}</span
					>件
				</div>
				<p>超期已办结数</p>
			</div>
			<div class="item" @click=";(dialogVisible = true), (logType = null)">
				<div class="circle">
					<span>{{ count.total }}</span
					>件
				</div>
				<p>违建总数</p>
			</div>
		</div>
		<div class="btns">
			<div class="diaoduBtn" @click="logVisible = true">调度历史</div>
			<div class="diaoduBtn" @click="startVisible = true">启动调度</div>
		</div>
		<el-dialog title="" v-model="dialogVisible" width="2300" align-center>
			<List :logType="logType" :areaType="null" dateType="" :nonType="null" />
		</el-dialog>
		<el-dialog title="" v-model="logVisible" width="2300" align-center>
			<LogList :logVisible="logVisible" />
		</el-dialog>
		<el-dialog title="" v-model="startVisible" width="2300" align-center>
			<StartDiaodu @handleCancel="startVisible = false" />
			<!-- <Demo /> -->
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { getLoginAuth, getWarningCount } from '@/api/illegal'
import router from '@/router'
import List from '../components/list.vue'
import LogList from '../components/logList.vue'
import StartDiaodu from '../components/startDiaodu.vue'
import { getToken, setToken } from '@/utils/auth'
import { useIllegalStore } from '@/store/modules/illegal'

const useIllegal = useIllegalStore()
const route = useRoute()
const logType = ref(0)
const dialogVisible = ref(false)
const logVisible = ref(false)
const startVisible = ref(false)
const count = ref({
	ycz: 0,
	total: 0,
	czz: 0,
	cqczz: 0,
	cqycz: 0,
})
// const goToList = () => {
// 	router.push('/illegal/list')
// }
onMounted(async () => {
	const token = getToken()
	if (!token) {
		const paramValue = route.query.code
		console.log(paramValue)
		await getLoginAuth({ code: paramValue })
			.then((res) => {
				setToken(res.data.token)
				useIllegal.getLeaderDeptList()
			})
			.catch((err) => {
				ElMessage.error(err)
				router.push('/401')
			})
	} else {
		useIllegal.getLeaderDeptList()
	}
	getWarningCount().then((res) => {
		count.value = res.data
	})
})
</script>
<style lang="scss" scoped>
.alarm {
	@include frame;
}

.count {
	background-image: url('@/assets/images/illegal/alarm-info.png');
	background-size: cover;
	background-size: 100% 100%;
	width: 100%;
	height: 76px;
	line-height: 76px;
	font-size: 26px;
	font-weight: lighter;
	margin-top: 60px;
	margin-left: 60px;
	span {
		color: red;
		font-size: 36px;
		font-weight: bold;
	}
}
.line-1 {
	margin-top: 55px;
	height: 189px;
	display: flex;
	justify-content: space-around;
	font-weight: lighter;

	p {
		font-size: 26px;
	}
	// background-color: red;
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		.circle {
			font-size: 27px;
			text-align: center;
			line-height: 189px;
			width: 186px;
			height: 189px;
			background: url('@/assets/images/illegal/green.png');
			background-size: cover;
			background-size: 100% 100%;
			span {
				font-size: 48px;
				font-weight: bold;
			}
		}
		.circle-2 {
			@extend .circle;
			background: url('@/assets/images/illegal/red.png');
			background-size: cover;
			background-size: 100% 100%;
		}
	}
}
.btns {
	position: absolute;
	display: flex;
	left: 50%;
	transform: translate(-50%, -50%);
	bottom: 100px;
	.diaoduBtn {
		width: 196px;
		height: 71px;
		background-image: url('@/assets/images/illegal/diaodu.png');
		font-size: 28px;
		text-align: center;
		line-height: 71px;
		cursor: pointer;
		margin-right: 40px;
	}
}
:deep(.el-dialog) {
	background-color: transparent !important;
	background-image: url('@/assets/images/illegal/background.png') !important;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 1266px;
}
:deep(.el-dialog__headerbtn) {
	width: 150px;
}
</style>
